.masthead.segment {
	min-height: 320px;
	padding: 1em 0em;
}

.masthead .logo.item img {
	margin-right: 1em;
}

.masthead h1.ui.header {
	margin-top: 1em;
	margin-bottom: 0em;
	font-size: 4em;
	font-weight: normal;
}

.masthead h2 {
	font-size: 1.8em;
	font-weight: normal;
}

.ui.vertical.stripe {
	padding: 2em 0em;
}

.ui.vertical.stripe p {
	font-size: 1.4em;
}

.ui.vertical.stripe .horizontal.divider {
	margin: 2em 0em;
}

.footer.segment {
	padding: 4em 0em;
	background: #333 !important;
}

.wrap-card {
	position: relative;
	box-shadow: 0px 0px 0px #818181;
	transition: all 0.2s ease 0s;
	-webkit-transform: translateY(0px) translateX(0px);
}

.wrap-card:before,
.wrap-card:after {
	display: inline-block;
	position: absolute;
	content: " ";
	width: 100%;
	height: 3px;
	background: #818181;
	-webkit-transform: scaleX(0);
	transition: all 0.2s ease;
}

.wrap-card:before {
	top: 0;
	left: 0;
	-webkit-transform-origin: 0 0;
}

.wrap-card:after {
	bottom: 0;
	left: 0;
	-webkit-transform-origin: 100% 0;
}

.wrap-card:hover {
	box-shadow: 10px 10px 0px #d4d4d5;
	-webkit-transform: translateY(-5px) translateX(-5px);
	transition: all 0.2s ease 0.4s;
}

.wrap-card:hover:after,
.wrap-card:hover:before {
	-webkit-transform: scaleX(1);
}

.card {
	background: #ffffff;
	padding: 15px 25px;
	margin-bottom: 30px;
	border: 1px solid rgba(129, 129, 129, 0.2);
}
.detail > img {
	width: 100%;
	height: 240px;
}

.card:before,
.card:after {
	display: inline-block;
	position: absolute;
	content: " ";
	width: 2px;
	height: 100%;
	background: #818181;
	-webkit-transform: scaleY(0);
	transition: all 0.2s ease 0.2s;
}

.card:before {
	top: 0;
	left: 0;
	-webkit-transform-origin: 0 100%;
}

.card:after {
	top: 0;
	right: 0;
	-webkit-transform-origin: 0 0;
}

.card:hover:after,
.card:hover:before {
	-webkit-transform: scaleY(1);
}